<template>
    <div>
      <div
        class="container"
        :style="{
          minHeight: '100vh',
          alignItems: 'center',
          display: 'flex',
          width: '100%',
          backgroundSize: '100% 100%',
          backgroundPosition: 'center center',
          backgroundRepeat: 'no-repeat',
          justifyContent: 'center',
        }"
      >
        <el-form
          ref="rgsForm"
          class="rgs-form"
          :model="rgsForm"
          :rules="rules"
          label-width="auto"
        >
          <div
            :style="{
              padding: '0px',
              margin: '0 0 10px',
              borderColor: '#eee',
              color: '#2b9afc',
              textAlign: 'center',
              display: 'inline-block',
              background: 'none',
              borderWidth: '0px',
              width: '100%',
              lineHeight: '40px',
              fontSize: '20px',
              borderStyle: 'solid',
              fontWeight: '500',
            }"
            class="title"
          >
            找回密码
          </div>
          <el-form-item label="手机号：">
            <el-input
              style="width: 300px;"
              v-model="ruleForm.phone"
              autocomplete="off"
              placeholder="手机号"
              type="text"
            />
          </el-form-item>
          <el-form-item label="新密码：">
            <el-input
              style="width: 300px;"
              v-model="ruleForm.password"
              autocomplete="off"
              placeholder="密码"
              type="password"
            />
          </el-form-item>
          <el-form-item label="确认密码：">
            <el-input
              style="width: 300px;"
              v-model="checkPassword"
              autocomplete="off"
              placeholder="确认密码"
              type="password"
            />
          </el-form-item>
          <button
            :style="{
              border: '0px solid #4FA1D9',
              cursor: 'pointer',
              padding: '0 24px',
              boxShadow: '0 0 0px rgba(64, 158, 255, .5)',
              margin: '20px 20px 0 0',
              color: '#fff',
              display: 'inline-block',
              letterSpacing: '4px',
              outline: 'none',
              borderRadius: '4px',
              background: '#2b9afc',
              width: 'auto',
              fontSize: '16px',
              height: '40px',
            }"
            type="button"
            class="r-btn"
            @click="retrieve()"
          >
            找回密码
          </button>
          <div
            :style="{
              cursor: 'pointer',
              padding: '0',
              margin: '20px 0 0',
              color: 'rgba(159, 159, 159, 1)',
              textAlign: 'right',
              display: 'inline-block',
              width: 'auto',
              lineHeight: '44px',
              fontSize: '14px',
            }"
            class="r-login"
            @click="close()"
          >
            前往登录
          </div>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        ruleForm: {},
        forgetForm: {},
        checkPassword: "",
      };
    },
    methods: {
      changeRules(name) {
        if (this.rules[name]) {
          return true;
        }
        return false;
      },
      // 获取uuid
      getUUID() {
        return new Date().getTime();
      },
      close() {
        this.$router.push({ path: "/login" });
      },
  
      // 多级联动参数
  
      // 注册
      retrieve() {
        if (!this.ruleForm.phone) {
          this.$message.error(`手机号不能为空`);
          return;
        }
        if (!this.ruleForm.password) {
          this.$message.error(`密码不能为空`);
          return;
        }
        if (this.ruleForm.password != this.checkPassword) {
          this.$message.error(`两次密码输入不一致`);
          return;
        }
        this.$http({
          url: `merchant/password`,
          method: "put",
          data: this.ruleForm,
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "修改成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.$router.replace({ path: "/login" });
              },
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .container {
    position: relative;
    background: url(http://codegen.caihongy.cn/20231118/03ccfac983fd4dac8fa98ccb357ee0dc.jpg);
  
    .el-date-editor.el-input {
      width: 100%;
    }
    .rgs-form {
      background-color: #fff;
      width: 500px;
      padding: 40px;
    }
  }
  .required {
    position: relative;
  }
  .required::after {
    color: red;
    position: absolute;
    right: 3px;
    content: "*";
    order: 3;
  }
  .editor > .avatar-uploader {
    line-height: 0;
    height: 0;
  }
  </style>
  